<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<cjrow title="123" content="123123123123"></cjrow>
			<cjrow title="321" content="321321321321"></cjrow>
			
			<blog-post
			  v-for="post in posts"
			  v-bind:key="post.id"
			  v-bind:title="post.title"
			></blog-post>
			
			<blog-post2
			  v-for="post in posts"
			  v-bind:key="post.id"
			  v-bind:post="post"
			></blog-post2>
		</div>
		
		<!--  自定义属性 -->
		<script type="text/javascript">
			// 使用props定义组件的属性,就像在android中自定义控件定义在attr中的属性一样.
			// 可以在布局文件中使用该属性显示或者计算.
			Vue.component('cjrow',{
				props: ['title','content'],
				// 如果组件包含多个元素,最外层需要包裹一个父元素.(每个组件必须只有一个根元素）)
				// 就像android的layout一样,xml中需要一个根布局
				template:'<div><h3>{{ title }}</h3><p>{{content}}</p></div>',
			
			})
			
			Vue.component('blog-post', {
			  props: ['title'],
			  template: '<h3>{{ title }}</h3>'
			})
			
			// 当组件中要显示的和算法越来越复杂，需要传进来的属性越多的时候，属性可以是一个对象.
			// 可以避免声明过多的属性,也会减少在使用时v-bind的数量
			Vue.component('blog-post2', {
			  props: ['post'],
			  template: `
			    <div class="blog-post">
			      <h3>{{ post.title }}</h3>
			      <div v-html="post.content"></div>
			    </div>
			  `
			})
			
			var vm = new Vue({
				el : "#app",
				// 在组件中,同样的可以使用v-bind来绑定自定义属性
				data : {
					posts: [
					      { id: 1, title: 'My journey with Vue',content:'content' },
					      { id: 2, title: 'Blogging with Vue' ,content:'content'},
					      { id: 3, title: 'Why Vue is so fun' ,content:'content'}
					    ]
				},
			});
			
		</script>
	</body>
</html>
